<template>
	<view class="imgcategory">
		<view class="choose" @click="numchange1">
			壁纸
		</view>
		<view class="choose1" @click="numchange2">
			图片
		</view>
		<view class="choose2" @click="numchange3">
			表情包
		</view>
	</view>
	<view class="body">
	<view class="upload" @click="getimg">
		<image :src="img" mode="" class="image"></image>
	</view>
		<button @click="uploadfile" class="click">上传</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	let img = ref("")
	let value = 0
	let type = ref("")
	let numchange1 =()=>{
		type.value = "壁纸"
	}
	let numchange2 =()=>{
		type.value = "图片"
	}
	let numchange3 =()=>{
		type.value = "表情包"
	}
	
	let getimg =()=>{
		uni.chooseImage({
			success: (f) => {
				console.log(f.tempFilePaths[0]);
				img.value = f.tempFilePaths[0]
			}
		})
	}
	let upload = ref("")
	let uploadfile =()=>{
		uni.uploadFile({
			url:"http://127.0.0.1:7001/setpic",
			filePath: img.value,
			formData:{type:type.value},
			success: (res) => {
				console.log(res);
			}
		})
	}
</script>

<style>
	.imgcategory{
		width: 750rpx;
		height: 150rpx;
		background-color: aliceblue;
		display: flex;
		flex-wrap: nowrap;
		color: azure;
		text-align: center;
		font-size: 40rpx;
		line-height: 100rpx;
	}
	.choose:hover{
		background-color: blanchedalmond;
		border: 1rpx red solid;
	}
	.choose1:hover{
		background-color: blanchedalmond;
		border: 1rpx red solid;
	}
	.choose2:hover{
		background-color: blanchedalmond;
		border: 1rpx red solid;
	}
	.choose{
		width: 200rpx;
		height: 100rpx;
		background-color: aqua;
		margin-left: 40rpx;
		margin-top: 25rpx;
		border-radius: 20rpx;
	}
	.choose1{
		width: 200rpx;
		height: 100rpx;
		background-color: red;
		margin-left: 40rpx;
		margin-top: 25rpx;
		border-radius: 20rpx;
	}
	.choose2{
		width: 200rpx;
		height: 100rpx;
		background-color: deepskyblue;
		margin-left: 40rpx;
		margin-top: 25rpx;
		border-radius: 20rpx;
	}
	.upload{
		width: 600rpx;
		margin-top: 100rpx;
		height: 500rpx;
		border: 1px solid black;
		margin-left:75rpx;
		border-radius: 20rpx;
	}
	.upload .image{
		width: 600rpx;
		height: 500rpx;
		border-radius: 20rpx;
	}
	.click{
		width: 200rpx;
		height: 100rpx;
		margin-top: 100rpx;
	}
	.body{
		width: 750rpx;
		background-color: aliceblue;
		overflow: hidden;
		height: 1049rpx;
	}
</style>
